<template>
  <div class="container">
    <dv-border-box-11 title="遥感图像" >
      <select v-model="selectedImagePath" @change="updateImage" class="image-select">
        <option value="" disabled selected>请选择</option>
        <option v-for="imagePath in imagePaths" :key="imagePath" :value="imagePath.url">{{ imagePath.name }}</option>
      </select>
      <img :src="imageUrl" alt="Image" class="image" @click="goToImageList" />
    </dv-border-box-11>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      selectedImagePath: '', // 用户选择的图片路径
      imagePaths: [
       
      ], // 图片列表
      imageUrl: './yaogan.jpg' // 默认图片
    };
  },
  created() {
    console.log('created开始加载left1....')
    this.getPicList()
  },
  methods: {
    updateImage() {
      // 当用户选择了新的图片路径时，更新imageUrl
      this.imageUrl = this.selectedImagePath;
    },
    goToImageList() {
      this.$router.push('/index/image-list'); // 使用路由名跳转
    },
    async getPicList() {
      try {
        // 获取图片数据
        const response1 = await axios.get('http://localhost:8080/rs-images/getAll')
        console.log('left1查询图片的response.data = ', response1.data)
        if (response1.code === '0') {
          this.imagePaths = response1.data
          this.imageUrl = response1.data[0].url
        } else {
          // 查询失败
          this.$message.success('查询图片失败')
        }
      } catch (error) {
        this.$message.success('查询图片失败')
      }
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.image {
  margin-top: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:100%; /* 设置图片宽度为容器宽度的100% */
  height:88%; /* 设置图片高度为容器高度的100% */
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;

}
.image-select {
  margin-left: 10px;
  margin-top: 0px;
  width: 100px;
  height:22px;
  overflow: auto;
  font-size: 12px; /* 设置字体大小 */
  background-color: transparent; /* 设置按钮背景为透明 */
  color: white;
}
.image-select option {
  color: black;
}
</style>

